<template>
    <!-- 后台管理我的资源详情父组件 -->
    <!-- 我的资源 -->
    <div class="dashboard-container">
      <div class="dashboard-content">
        <div style="position: relative; float: right; margin-top: -30px">
          <img
            style="position: absolute; left: 60px; top: -20px; right: 0"
            src="@/assets/home/admin/home/manage_top2.png"
            alt=""
          />
          <img src="@/assets/home/admin/home/manage_top1.png" alt="" />
        </div>
        <!-- 顶部标题 -->
        <div class="dashboard-header">
          <icon-title
            title="我的资源"
            fontSize="20px"
            :img-src="require('@/assets/home/admin/home/text_title.png')"
          />
        </div>
  
        <!-- 统计卡片区域 -->
        <div class="stats-summary">
          <div class="stat-card">
            <div class="stat-label">企业总数</div>
            <div class="stat-number">{{ stats.companyCount }}</div>
          </div>
          <div class="stat-card">
            <div class="stat-label">累计粉丝量</div>
            <div class="stat-number">{{ stats.totalFans }}</div>
          </div>
          <div class="stat-card">
            <div class="stat-label">已购买模版</div>
            <div class="stat-number">{{ stats.templateCount }}</div>
          </div>
        </div>
        <!-- 新建企业按钮和搜索框 -->
        <div class="company-list-container">
          <div
            class="create-company-section"
            style="border-bottom: 1px solid #cccccc; padding-bottom: 36px"
          >
            <CustomButton text="新建企业" type="primary" @click="createCompany" />
            <span style="padding-left: 20px">企业名称</span>
            <el-input
              v-model="searchKeyword"
              placeholder="输入企业名称"
              size="small"
              class="search-input"
              @keyup.enter.native="searchCompanies"
            />
            <CustomButton
              text="搜索"
              type="primary"
              size="small"
              @click="searchCompanies"
            />
          </div>
          <!-- 企业列表 -->
          <div
            class="company-list"
            v-for="(company, index) in filteredCompanies"
            :key="company.id"
          >
            <div class="company-info">
              <span class="f17 bold primary-color">{{ company.name }}</span>
              <!-- <span class="f13" style="color: #909399; padding-left: 40px"
                >创建时间:{{ formatDate(company.createTime) }}</span
              > -->
            </div>
            <el-row :gutter="0">
              <div>
                <!-- 公众号信息 -->
                <el-col :span="17">
                  <el-row>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        margin-bottom: 6px;
                      "
                    >
                      <el-col :span="2">
                        <div class="info-row">
                          <span class="info-label">公众号：</span>
                        </div></el-col
                      >
                      <el-col :span="6">
                        <div class="info-row">
                          <span class="info-label" style="padding-left: 35px"
                            >名称</span
                          >
                          <span class="info-value">{{
                            company.officialAccount.name
                          }}</span>
                          <span
                            class="edit-tag color-back"
                            @click="editOfficialAccountName(company.id)"
                            >修改</span
                          >
                          <el-tooltip placement="top">
                            <div slot="content">
                              <div style="margin-bottom: 6px">
                                <svg-icon
                                  icon="white-circle"
                                  width="10"
                                  height="10"
                                  viewBox="0 0 10 10"
                                  :custom-style="{
                                    transform: 'translateY(-2px)',
                                  }"
                                />
                                <span style="padding-left: 10px"
                                  >个人类型公众号 ：一年内有 2
                                  次修改名称的机会。</span
                                >
                              </div>
                              <div>
                                <svg-icon
                                  icon="white-circle"
                                  width="10"
                                  height="10"
                                  viewBox="0 0 10 10"
                                  :custom-style="{
                                    transform: 'translateY(-2px)',
                                  }"
                                />
                                <span style="padding-left: 10px"
                                  >非个人类型公众号 ：已认证的公众号，无论企业、媒体、政府或者其他组织类别，在同一自然年内仅能修改
                                  1 次名称；</span
                                >
                              </div>
                            </div>
                            <i class="el-icon-warning color-back f15"></i>
                          </el-tooltip></div
                      ></el-col>
                      <el-col :span="6">
                        <div class="info-row">
                          <span class="info-label">年审时间：</span>
                          <span class="info-value">{{
                            company.officialAccount.auditTime
                          }}</span>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="info-row">
                          <span class="info-label">到期时间：</span>
                          <span class="info-value">{{
                            company.officialAccount.expireTime
                          }}</span>
                          <span
                            class="edit-tag color-back"
                            @click="renewService(company.id, 'officialAccount')"
                            >续费：</span
                          >
                          <div style="position: relative"></div></div
                      ></el-col>
                      <!-- <el-col :span="2"
                        ><div class="info-row">
                          <div class="flex" style="align-items: center">
                            <Avatar :src="company.officialAccount.logoUrl" />
                            <span
                              class="color-back f12"
                              @click="uploadLogo(company.id, 'officialAccount')"
                              >上传</span
                            >
                          </div>
                        </div></el-col
                      > -->
                    </div>
                  </el-row>
                </el-col>
  
                <!-- 小程序信息 -->
                <el-col :span="17">
                  <el-row>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        margin-bottom: 6px;
                      "
                    >
                      <el-col v-if="company" :span="2">
                        <div class="info-row">
                          <span class="info-label">小程序：</span>
                        </div></el-col
                      >
                      <el-col v-if="!company.isOpenWechart" :span="6">
                        <span
                          class="info-label"
                          style="padding-left: 35px; padding-right: 20px"
                          >未开通</span
                        >
                        <span class="edit-tag color-back" @click=""
                          >点击去开通</span
                        >
                      </el-col>
  
                      <el-col v-if="company.isOpenWechart" :span="6">
                        <div class="info-row">
                          <span class="info-label" style="padding-left: 35px"
                            >名称</span
                          >
                          <span class="info-value">{{
                            company.miniProgram.name
                          }}</span>
                          <span
                            class="edit-tag color-back"
                            @click="editMiniProgramName(company.id)"
                            >修改</span
                          >
                          <el-tooltip placement="top">
                            <div slot="content">
                              <div style="margin-bottom: 6px">
                                <svg-icon
                                  icon="white-circle"
                                  width="10"
                                  height="10"
                                  viewBox="0 0 10 10"
                                  :custom-style="{
                                    transform: 'translateY(-2px)',
                                  }"
                                />
                                <span style="padding-left: 10px"
                                  >小程序账号每年仅有 2 次修改名称的机会。</span
                                >
                              </div>
                            </div>
                            <i class="el-icon-warning color-back f15"></i>
                          </el-tooltip></div
                      ></el-col>
                      <el-col v-if="company.isOpenWechart" :span="6">
                        <div class="info-row">
                          <span class="info-label">年审时间：</span>
                          <span class="info-value">{{
                            company.miniProgram.auditTime
                          }}</span>
                        </div>
                      </el-col>
                      <el-col v-if="company.isOpenWechart" :span="8">
                        <div class="info-row">
                          <span class="info-label">到期时间：</span>
                          <span class="info-value">{{
                            company.miniProgram.expireTime
                          }}</span>
                          <span
                            class="edit-tag color-back"
                            @click="renewService(company.id, 'miniProgram')"
                            >续费：</span
                          >
                          <div style="position: relative"></div></div
                      ></el-col>
                      <el-col v-if="company.isOpenWechart" :span="2"
                        ><div class="info-row">
                          <div class="flex" style="align-items: center">
                            <Avatar :src="company.miniProgram.logoUrl" />
                            <span
                              class="color-back f12"
                              @click="uploadLogo(company.id, 'miniProgram')"
                              >上传</span
                            >
                          </div>
                        </div></el-col
                      >
                    </div>
                  </el-row>
                </el-col>
  
                <!-- PC端链接信息 -->
                <el-col :span="17">
                  <el-row>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        margin-bottom: 6px;
                      "
                    >
                      <el-col :span="2">
                        <div class="info-row">
                          <span class="info-label right">PC端链接：</span>
                        </div>
                      </el-col>
                      <el-col v-if="!company.isOpenPC" :span="6">
                        <span
                          class="info-label"
                          style="padding-left: 35px; padding-right: 20px"
                          >未开通</span
                        >
                        <span class="edit-tag color-back" @click=""
                          >点击去开通</span
                        >
                      </el-col>
                      <el-col v-if="company.isOpenPC" :span="12">
                        <div class="info-row flex">
                          <span class="info-value" style="padding-left: 20px"
                            >{{ company.pcLink.url }} </span
                          >
                          <span
                            class="edit-tag color-back"
                            @click="openPcLink(company.id)"
                            ><i class="el-icon-warning"></i>点击跳转链接</span
                          >
                        </div></el-col
                      >
                      <el-col v-if="company.isOpenPC" :span="8">
                        <div class="info-row">
                          <span class="info-label">到期时间：</span>
                          <span class="info-value">{{
                            company.pcLink.expireTime
                          }}</span>
                          <span
                            class="edit-tag color-back"
                            @click="renewService(company.id, 'pcLink')"
                            >续费：</span
                          >
                          <div style="position: relative"></div></div
                      ></el-col>
                      <el-col v-if="company.isOpenPC" :span="2"
                        ><div class="info-row">
                          <div class="flex" style="align-items: center">
                            <Avatar :src="company.pcLink.logoUrl" />
                            <span
                              class="color-back f12"
                              @click="uploadLogo(company.id, 'pcLink')"
                              >上传</span
                            >
                          </div>
                        </div></el-col
                      >
                    </div>
                  </el-row>
                </el-col>
              </div>
  
              <!-- 已购买模板信息 -->
              <el-col :span="17">
                <div
                  v-for="(template, templateIndex) in company.templates"
                  :key="templateIndex"
                >
                  <el-row v-if="templateIndex == 0">
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                      "
                    >
                      <el-col :span="2">
                        <div class="info-row">
                          <span class="info-label right">我的的模版：</span>
                        </div></el-col
                      >
                      <el-col :span="6">
                        <div class="info-row left">
                          <span class="info-value left">{{ template.name }}</span>
                          <el-button
                            style="padding: 0"
                            :class="
                              template.status === 'using'
                                ? 'smill-btn-one'
                                : 'smill-btn-two'
                            "
                            >{{
                              template.status === "using" ? "使用中" : "立即使用"
                            }}</el-button
                          >
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="info-row">
                          <span class="info-label">购买时间：</span>
                          <span class="info-value">{{
                            template.purchaseTime
                          }}</span>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="info-row">
                          <span class="info-label">到期时间：</span>
                          <span
                            class="info-value"
                            :class="template.needRenew ? 'renew' : ''"
                            >{{ template.expireTime }}</span
                          >
                          <el-button
                            v-if="template.needRenew"
                            class="smill-btn"
                            @click="renewTemplate(company.id, template.id)"
                            >立即续费</el-button
                          >
                          <span
                            v-else
                            class="edit-tag color-back"
                            @click="renewService(company.id, 'pcLink')"
                            >续费：</span
                          >
                          <i 
                            v-if="company.templates.length>1"
                            @click="
                              toggleTemplateExpand(company, company.templates)
                            "
                            :class="[
                              template.isOpen ? 'el-icon-caret-top' : 'rotate',
                              'f20',
                              'toggle-icon',
                            ]"
                            class="el-icon-caret-top f20"
                          ></i>
                          <i v-if="company.templates.length==1"
                           
                          ></i>
                        </div>
                      </el-col>
                    </div>
                  </el-row>
                  <el-row v-show="templateIndex !== 0 && template.isOpen">
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                      "
                    >
                      <el-col :span="2"> </el-col>
                      <el-col :span="6">
                        <div class="info-row left">
                          <span class="info-value left">{{ template.name }}</span>
                          <el-button
                            style="padding: 0"
                            :class="
                              template.status === 'using'
                                ? 'smill-btn-one'
                                : 'smill-btn-two'
                            "
                            >{{
                              template.status === "using" ? "使用中" : "立即使用"
                            }}</el-button
                          >
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="info-row">
                          <span class="info-label">购买时间：</span>
                          <span class="info-value">{{
                            template.purchaseTime
                          }}</span>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="info-row">
                          <span class="info-label">到期时间：</span>
                          <span
                            class="info-value"
                            :class="template.needRenew ? 'renew' : ''"
                            >{{ template.expireTime }}</span
                          >
                          <el-button
                            v-if="template.needRenew"
                            class="smill-btn"
                            @click="renewTemplate(company.id, template.id)"
                            >立即续费</el-button
                          >
                          <span
                            v-else
                            class="edit-tag color-back"
                            @click="renewService(company.id, 'pcLink')"
                            >续费：</span
                          >
                        </div>
                      </el-col>
                    </div>
                  </el-row>
                </div>
              </el-col>
  
              <!-- 二维码区域 -->
              <el-col :span="7"
                ><div style="margin-top: -127px">
                  <div class="qrcode-section">
                    <div class="company-actions">
                      <span
                        class="edit-tag color-back"
                        @click="manageWechatWebsite(company.id)"
                        >管理我的微信官网</span
                      >
                      <span class="edit-tag line"
                        ><span
                          style="padding-left: 10px; color: #323232"
                          @click="configureOfficialAccount(company.id)"
                          >配置公众号</span
                        ></span
                      >
                    </div>
                    <div class="qrcode-content">
                      <div class="qrcode-item">
                        <div>
                          <QrcodeGenerator
                            ref="customQrcode"
                            :content="customQrcodeConfig.content"
                            :size="customQrcodeConfig.size"
                            :foreground-color="customQrcodeConfig.foregroundColor"
                            :background-color="customQrcodeConfig.backgroundColor"
                            :error-correction-level="
                              customQrcodeConfig.errorCorrectionLevel
                            "
                          />
                        </div>
                        <div class="qrcode-label">小程序二维码</div>
                        <div class="qrcode-desc">
                          有效期30天，自行<span
                            class="color-back"
                            @click="uploadQrCode(company.id, 'miniProgram')"
                            >上传</span
                          >
                          永久
                        </div>
                      </div>
                      <div class="qrcode-item">
                        <div>
                          <QrcodeGenerator
                            ref="customQrcode"
                            :content="customQrcodeConfig.content"
                            :size="customQrcodeConfig.size"
                            :foreground-color="customQrcodeConfig.foregroundColor"
                            :background-color="customQrcodeConfig.backgroundColor"
                            :error-correction-level="
                              customQrcodeConfig.errorCorrectionLevel
                            "
                          />
                        </div>
                        <div class="qrcode-label">公众号二维码</div>
                        <div class="qrcode-desc">
                          有效期30天，自行<span
                            class="color-back"
                            @click="uploadQrCode(company.id, 'officialAccount')"
                            >上传</span
                          >永久
                        </div>
                      </div>
                    </div>
                  </div>
                </div></el-col
              >
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  // 引入二维码生成组件
  import QrcodeGenerator from "@/components/public/QrcodeGenerrator.vue";
  export default {
    name: "ManageCenterIndex",
    components: {
      QrcodeGenerator,
    },
    data() {
      return {
        // 自定义二维码配置
        customQrcodeConfig: {
          content: "https://www.ucharts.cn/v2/#/", //
          size: 100, //二维码大小
          foregroundColor: "#333333", //二维码颜色
          backgroundColor: "#ffffff", //二维码背景颜色
          errorCorrectionLevel: "M", //二维码错误 correction level
        },
        searchKeyword: "",
        // 统计数据
        stats: {
          companyCount: 3,
          totalFans: 2123456,
          templateCount: 5,
        },
        seletedTemplateIndex: false,
        // 企业列表数据
        companies: [
          {
            id: 1,
            name: "北京优易捷科技有限责任公司",
            createTime: "2025-04-05 21:59",
            isOpenWechart: false,
            isOpenPC: false,
            officialAccount: {
              name: "智联科创",
              auditTime: "2025/04/05 21:59",
              expireTime: "2025/04/05 21:59",
              logoUrl:
                "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
              qrCodeUrl: "@/assets/qrcode_website.png",
            },
            miniProgram: {
              name: "智联科创",
              auditTime: "2025/04/05 21:59",
              expireTime: "2025/04/05 21:59",
              logoUrl:
                "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
              qrCodeUrl: "@/assets/qrcode_service.png",
            },
            pcLink: {
              url: "https://example.com/payment-confirm",
              expireTime: "2025/04/05 21:59",
              logoUrl:
                "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
            },
            templates: [
              {
                id: 1,
                name: "智慧园区",
                status: "using",
                purchaseTime: "2025/04/05 21:59",
                expireTime: "2025/04/05 21:59",
                needRenew: true,
                isOpen: false,
              },
              {
                id: 2,
                name: "智慧园区",
                status: "notUsing",
                purchaseTime: "2025/04/05 21:59",
                expireTime: "2025/04/05 21:59",
                needRenew: false,
                isOpen: false,
              },
              {
                id: 3,
                name: "智慧园区",
                status: "notUsing",
                purchaseTime: "2025/04/05 21:59",
                expireTime: "2025/04/05 21:59",
                needRenew: false,
                isOpen: false,
              },
            ],
          },
          {
            id: 2,
            name: "北京优易捷科技有限责任公司",
            createTime: "2025-03-15 14:30",
            isOpenWechart: true,
            isOpenPC: false,
            officialAccount: {
              name: "未来科技",
              auditTime: "2025/03/15 14:30",
              expireTime: "2025/03/15 14:30",
              logoUrl:
                "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
              qrCodeUrl: "@/assets/qrcode_website.png",
            },
            miniProgram: {
              name: "未来科技",
              auditTime: "2025/03/15 14:30",
              expireTime: "2025/03/15 14:30",
              logoUrl:
                "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
              qrCodeUrl: "@/assets/qrcode_service.png",
            },
            pcLink: {
              url: "https://future-tech.example.com",
              expireTime: "2025/03/15 14:30",
              logoUrl:
                "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
            },
            templates: [
              {
                id: 4,
                name: "企业官网",
                status: "using",
                purchaseTime: "2025/03/15 14:30",
                expireTime: "2025/03/15 14:30",
                needRenew: true,
                isOpen: false,
              },
              {
                id: 5,
                name: "产品展示",
                status: "notUsing",
                purchaseTime: "2025/03/15 14:30",
                expireTime: "2025/03/15 14:30",
                needRenew: false,
                isOpen: false,
              },
            ],
          },
          {
            id: 3,
            name: "北京优易捷科技有限责任公司",
            createTime: "2025-03-15 14:30",
            isOpenWechart: false,
            isOpenPC: false,
            officialAccount: {
              name: "未来科技",
              auditTime: "2025/03/15 14:30",
              expireTime: "2025/03/15 14:30",
              logoUrl:
                "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
              qrCodeUrl: "@/assets/qrcode_website.png",
            },
            miniProgram: {
              name: "未来科技",
              auditTime: "2025/03/15 14:30",
              expireTime: "2025/03/15 14:30",
              logoUrl:
                "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
              qrCodeUrl: "@/assets/qrcode_service.png",
            },
            pcLink: {
              url: "https://future-tech.example.com",
              expireTime: "2025/03/15 14:30",
              logoUrl:
                "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
            },
            templates: [
              {
                id: 4,
                name: "企业官网",
                status: "using",
                purchaseTime: "2025/03/15 14:30",
                expireTime: "2025/03/15 14:30",
                needRenew: true,
                isOpen: false,
              },
              {
                id: 5,
                name: "产品展示",
                status: "notUsing",
                purchaseTime: "2025/03/15 14:30",
                expireTime: "2025/03/15 14:30",
                needRenew: false,
                isOpen: false,
              },
            ],
          },
        ],
      };
    },
    computed: {
      // 过滤后的企业列表
      filteredCompanies() {
        if (!this.searchKeyword) {
          return this.companies;
        }
        return this.companies.filter((company) =>
          company.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
        );
      },
    },
    methods: {
      // 格式化日期显示
      formatDate(dateString) {
        if (!dateString) return "";
        // 将YYYY-MM-DD HH:mm格式转换为YYYY / MM / DD HH:mm
        return dateString.replace(/(\d{4})-(\d{2})-(\d{2})/, "$1 / $2 / $3");
      },
  
      // 搜索企业
      searchCompanies() {
        // 这里可以添加搜索逻辑，当前通过computed自动过滤
        console.log("搜索企业:", this.searchKeyword);
      },
  
      // 创建新企业
      createCompany() {
        console.log("创建新企业");
        // 这里可以添加创建企业的逻辑
      },
  
      // 编辑公众号名称
      editOfficialAccountName(companyId) {
        console.log("编辑公众号名称，企业ID:", companyId);
          // 这里可以添加编辑公众号名称的逻辑
        // 跳转管理我的微官网
        this.$router.push({
          path: "/productOpenwecartAfter/admin/Edit",
          query: {
            // companyName: this.companyName,
            // themeColor: this.selectedThemeColor,
          },
        });
      },
  
      // 编辑小程序名称
      editMiniProgramName(companyId) {
        console.log("编辑小程序名称，企业ID:", companyId);
        // 这里可以添加编辑小程序名称的逻辑
      },
  
      // 续费服务
      renewService(companyId, serviceType) {
        console.log(`续费${serviceType}服务，企业ID:`, companyId);
        // 这里可以添加续费服务的逻辑
      },
  
      // 续费模板
      renewTemplate(companyId, templateId) {
        console.log(`续费模板，企业ID:${companyId}，模板ID:${templateId}`);
        // 这里可以添加续费模板的逻辑
      },
  
      // 上传logo
      uploadLogo(companyId, serviceType) {
        console.log(`上传${serviceType}Logo，企业ID:`, companyId);
        // 这里可以添加上传logo的逻辑
      },
  
      // 上传二维码
      uploadQrCode(companyId, serviceType) {
        console.log(`上传${serviceType}二维码，企业ID:`, companyId);
        // 这里可以添加上传二维码的逻辑
      },
  
      // 打开PC端链接
      openPcLink(companyId) {
        const company = this.companies.find((c) => c.id === companyId);
        if (company && company.pcLink && company.pcLink.url) {
          window.open(company.pcLink.url, "_blank");
        }
      },
  
      // 管理微信官网
      manageWechatWebsite(companyId) {
        console.log("管理微信官网，企业ID:", companyId);
        // 这里可以添加管理微信官网的逻辑
      },
  
      // 配置公众号
      configureOfficialAccount(companyId) {
        console.log("配置公众号，企业ID:", companyId);
        // 这里可以添加配置公众号的逻辑
      },
      // 添加切换模板展开/折叠状态的方法
      toggleTemplateExpand(item, templates) {
        console.log(item, templates);
        // 只切换第一个模板的isOpen状态，其他模板根据第一个模板的状态同步更新
        const firstTemplate = templates[0];
        const newState = !firstTemplate.isOpen;
  
        templates.forEach((template, index) => {
          // 第一个模板的状态作为控制状态
          if (index === 0) {
            template.isOpen = newState;
          } else {
            // 其他模板的状态根据是否展开来设置
            template.isOpen = newState;
          }
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .float {
    height: 50px;
    background-color: blue;
    color: #fff;
    position: absolute;
    top: -50px;
  }
  .float:hover {
    width: 550px;
  }
  .float-content {
    opacity: 0;
  }
  .float:hover .float-content {
    opacity: 1;
  }
  .dashboard-container {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 30px 80px 80px 80px;
    box-sizing: border-box;
    overflow-y: auto;
    .dashboard-content {
      position: relative;
      padding: 30px 40px 40px 40px;
      background-image: url("@/assets/home/admin/home/manage_back.png");
      background-repeat: no-repeat;
      background-size: cover;
      border-bottom: 1px solid #ccc;
      border-radius: 30px;
    }
  }
  
  .dashboard-header {
    margin-bottom: 20px;
    h2 {
      font-size: 18px;
      color: #303133;
      font-weight: 600;
      margin: 0;
      display: flex;
      align-items: center;
      i {
        margin-right: 8px;
        color: #409eff;
      }
    }
  }
  
  /* 统计卡片样式 */
  .stats-summary {
    width: 100%;
    position: absolute;
    top: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    margin-bottom: 20px;
  }
  
  .stat-card {
    padding: 20px;
    position: relative;
    transition: all 0.3s ease;
    // &:hover {
    //   transform: translateY(-2px);
    //   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    // }
    // &.highlight {
    //   background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
    //   color: white;
    // }
  }
  
  .stat-number {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 20px;
  }
  
  .stat-label {
    font-size: 14px;
    opacity: 0.8;
    font-weight: bold;
  }
  
  .stat-badge {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  
  /* 新建企业按钮区域 */
  .create-company-section {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  .create-btn {
    background: #409eff;
    border-color: #409eff;
  }
  
  .search-input {
    width: 200px;
  }
  
  /* 企业列表样式 */
  .el-icon-caret-top {
    transition: all 0.5s ease; /* 平滑过渡效果 */
    cursor: pointer;
    transform-origin: center; /* 旋转中心点 */
  }
  .el-icon-caret-top.rotate {
    transform: rotate(180deg);
  }
  .company-list-container {
    margin-top: 160px;
  }
  .company-list {
    border-bottom: 1px solid #cccccc;
    padding: 30px 0;
  }
  .company-info {
    margin-bottom: 10px;
  }
  .company-item {
    border: 1px solid #34e61c;
    border-radius: 8px;
    background: #fff;
    display: flex;
    transition: all 0.3s ease;
  }
  
  .company-info-section {
    flex: 7;
    border: 1px solid green;
  }
  
  .company-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .company-title {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .company-name {
    font-size: 16px;
    font-weight: 600;
    color: #656565;
  }
  
  .create-time {
    font-size: 13px;
    color: #909399;
  }
  
  .company-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    position: relative;
  }
  .qrcode-content {
    display: flex;
    justify-content: flex-end;
    padding-top: 15px;
  }
  .account-info.content {
    gap: 0px !important;
    display: grid;
    grid-template-columns: 0fr 1fr;
  }
  .account-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    .template-list {
      margin-bottom: 20px;
      width: 100%;
      display: flex;
      gap: 16px;
      padding-left: 5px;
    }
  }
  .info-row.left {
    padding-left: 35px;
  }
  .info-row.flex {
    padding-left: 15px;
  }
  .info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    .info-label.left {
      padding-left: 30px;
    }
  }
  .info-label {
    color: #909399;
    font-size: 13px;
    white-space: nowrap;
  }
  .info-value {
    color: #303133;
    font-size: 13px;
    padding-right: 10px;
  }
  .info-value.renew {
    color: #ff5f0a !important;
  }
  .edit-tag.line::before {
    content: "";
    display: block;
    position: absolute;
    width: 2px;
    height: 13px;
    background-color: #edeff0;
    top: 2px;
  }
  .edit-tag {
    font-size: 12px;
    color: #409eff;
    cursor: pointer;
  }
  
  .vip-badge {
    background: #e6a23c;
    border-color: #e6a23c;
  }
  
  .renew-badge {
    background: #409eff;
    border-color: #409eff;
  }
  
  .info-link {
    color: #409eff;
    text-decoration: none;
    font-size: 13px;
    &:hover {
      text-decoration: underline;
    }
  }
  
  .expire-label {
    font-size: 13px;
    color: #909399;
  }
  
  .premium-badge {
    background: #e6a23c;
    border-color: #e6a23c;
  }
  
  .open-btn {
    padding: 0;
    height: auto;
    font-size: 13px;
  }
  
  /* 模板信息样式 */
  .template-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .template-item {
    border: 1px solid #ecf5ff;
    border-radius: 6px;
    padding: 10px;
    background: #f0f9ff;
  }
  
  .template-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }
  
  .template-name {
    color: #409eff;
    font-size: 14px;
    font-weight: 500;
  }
  
  .template-status {
    color: #67c23a;
    background: #ecfdf5;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
  }
  
  .template-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .detail-label {
    color: #909399;
    font-size: 13px;
    min-width: 80px;
  }
  
  .detail-value {
    color: #303133;
    font-size: 13px;
  }
  
  .template-renew-badge {
    background: #f56c6c;
    border-color: #f56c6c;
    margin-left: auto;
  }
  
  .template-actions {
    margin-top: 8px;
  }
  
  .template-action-btn {
    font-size: 13px;
    color: #409eff;
    padding: 0;
    height: auto;
  }
  
  /* 二维码区域 */
  .qrcode-section {
    flex: 3;
    gap: 0px;
    min-width: 200px;
  }
  .qrcode-item:nth-child(2) {
    padding-left: 20px;
  }
  .qrcode-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  
  .qrcode-img {
    width: 80px;
    height: 80px;
    border: 1px solid #ebeef5;
    padding: 5px;
    border-radius: 4px;
    background: #fff;
  }
  
  .qrcode-label {
    font-size: 13px;
    color: #303133;
    font-weight: 500;
  }
  
  .qrcode-desc {
    font-size: 11px;
    color: #909399;
    text-align: center;
    line-height: 1.4;
  }
  // 添加color-back类样式及其hover效果
  .color-back {
    color: #409eff; // 设置上传文字的基础颜色
    cursor: pointer; // 鼠标悬停显示指针样式
    transition: all 0.3s ease; // 添加过渡效果
    display: inline-block; // 确保transform效果正常工作
  
    // hover效果：文字向上移动、背景色变化、文字颜色变化
    &:hover {
      transform: translateY(-2px); // 向上移动2px
      text-shadow: 0 1px 2px rgba(64, 158, 255, 0.3);
    }
    &:active {
      transform: translateY(0) scale(0.95); // 回到原位并轻微缩小
      text-shadow: 0 0 1px rgba(64, 158, 255, 0.5); // 调整文字阴影
    }
  }
  </style>
  